<!--  frame 可用优惠卷 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
  <meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>可用优惠卷</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css"/>

	<style>

	body {
	  /*background-color:#F8F8F8;*/
	}
	/* pages/coupon/coupon.wxss */

	page {
	    background: #f9f9f9;
	}

	.card {
	    margin: .20rem;
	    position: relative;
	    /* border: 1rem solid #eee; */
	    background: #fff;
	    border-radius: .10rem;
	}

	.bt {
	    width: 1.50rem;
	    height: .50rem;
	    background: #ff502d;
	    border-radius: .32rem;
	    color: #FEFEFE;
	}

	.coupon-time {
	    height: .80rem;
	    padding: 0 .30rem;
	    position: relative;
	}

	.lading{
		display: flex;
		justify-content: center;
		align-content: center;
		font-size: .30rem;
		color: #aaa;
		margin-bottom: .50rem;

	}

	.clear {
		margin: .20rem;
		padding: .30rem;
		font: .30rem/1em "";
		text-align: center;
		position: relative;
		background: #fff;
		border-radius: .10rem;
	}
	.flex-between {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	.flex {
  display: flex;
  align-items: center;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
	</style>
</head>
<body>
	<div class="content app" v-cloak>
		<!-- 可使用优惠卷 -->
		<div>
			<div class="clear" @click="clear">不使用优惠券</div>
		    <div class="card" style="padding: .20rem;" v-for="(item,index) in card" :key="index">
		        <div class="flex-between">
		            <div style="width: 70%;">
		                <div class="flex"  style="color: #FF502D;">
		                    <div  style="position: relative;margin-top: .20rem;font-size:0.24rem">￥</div>
		                    <div  style="font-size:0.60rem">{{item.face_amount}}</div>
		                    <div  style="position: relative;margin-top: .20rem;font-size:.28rem;padding-left: .20rem;">满{{item.rule_money}}使用</div>
		                </div>
		                <div  style="color:#444;font-size:0.3rem;margin-top: .20rem;font-weight: 700;">{{item.title}}</div>
		                <div  style="font-size:0.22rem;color:#999;margin-top: .20rem;">{{item.use_date}}-{{item.ending_date}}</div>
		            </div>
		           <div style="border-left: 1px solid #eee;padding:.20rem 0;padding-left: .40rem;">
		                <!-- <div class="fs-28 flex-center" style="color: #FFB800;">{{item.integral}}分</div> -->
		                <div class="bt  flex-center" style="margin-top: .10rem;font-size:0.28rem;" @click="received(item)"   hover-class="hover-class">立即使用</div>
		            </div>
		        </div>
		    </div>


				<div v-if="lading != 0" class="lading">
					<div  v-if="lading == 1">上拉加载</div>
					<div  v-if="lading == 2">正在加载...</div>
					<div  v-if="lading == 3">已经到底了</div>
				</div>
				<div v-else class="no-data">
						<img src="../image/yhj.png" alt="">
						<div class="">
							暂无优惠卷
						</div>
				</div>
		</div>

	</div>
</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
window.addEventListener("apiready",function(){
	index()
});

function index()
{
	var vm = new Vue({
		el: ".app",
		data: {
					id: "",//api.pageParam.id,
					type: 1, // 0 我的优惠券、1 领取优惠券
					shop: 1,
					card: [],
					hongBaoData: [],
					lading: 3,
		},
		mounted: function(){
			  this.id=api.pageParam.id
				this.getCouponList()
		},
		methods: {
			//获取优惠券列表
			getCouponList: function (loader) {
				//alert(this.id)
				this.lading = 3
				let param = {
						product_ids: this.id
				}
				AjaxSafe({
			   		url:"/xapp/user/availableCoupon",
			    	data:param,
			    	loader:loader,
					success: function(ret) {
						vm.card = ret.data
						if (ret.data.length == 0) {
							vm.lading = 0
						} else {
							vm.lading = 3
						}
					},
					failed: function(err){
							alert("网络故障！");
					}
				});
			},
			// 立即使用
				received: function (data) {
					api.sendEvent({
					    name: 'evt_CouponChoose',
					    extra: {
					        data: data
					    }
					});
					api.closeWin();
				},

				// 不使用优惠券
				clear: function () {
					api.sendEvent({
					    name: 'evt_CouponClear',
					    extra: {}
					});
					api.closeWin();
				},





		},

	});
}

</script>
</html>
